<template>
  <view class="">

    <fui-input label="公里数" borderTop placeholder="请输入公里数" v-model="formData.kilometers" clearable="true">
      <!-- 插槽，用于在右侧添加自定义内容 -->
      <template> <span style="padding-left: 5px;">km</span></template>
    </fui-input>

    <fui-input label="平均油耗" :bottomLeft="0" placeholder="请输平均油耗" v-model="formData.oilConsumption" clearable="true" >
      <template> <span style="padding-left: 5px;">L</span></template>
    </fui-input>

    <button @click="submitForm">计算</button>
    <view v-if="oilPrice.p92">
      92号：{{ oilPrice.p92 }} 元 | 95号：{{ oilPrice.p95 }} 元
    </view>
    <view v-if="oilPrice.p92">
      行驶{{ formData.kilometers }} 公里， 花费 {{ dataInfo.totalPrice }} 元， 每公里花费{{ dataInfo.ricePer }} 元
    </view>
  </view>
</template>

<script>

import {getOilPrice} from "../../models/appTool";

import fuiInput from "@/components/firstui/fui-input/fui-input.vue"

export default {
  components: {
    fuiInput
  },
  data() {
    return {
      formData: {
        oilConsumption: "",
        kilometers: ""
      },
      oilPrice: {},
      dataInfo: {
        totalPrice: 0,
        ricePer: 0
      }
    }
  },
  onLoad() {
    // this.getPrice()
  },
  methods: {

    async getPrice() {
      const result = await getOilPrice({"city": "辽宁"})
      const res = result.data.data
      return res
    },

    async submitForm() {
      this.oilPrice = await this.getPrice()
      this.dataInfo.totalPrice = ((this.formData.oilConsumption / 100) * (this.formData.kilometers) * this.oilPrice['p95']).toFixed(2)
      this.dataInfo.ricePer = ((this.oilPrice['p95'] * this.formData.oilConsumption) / 100).toFixed(2)

    }

  }
}
</script>